// 变量  
// - 变量在css程序编写之中最方便的就是统一更改的特性; 

// - 变量声明 : $变量:变量值; 

// - 变量使用规范 : 
// - 需要把变量独立提取成一个文件; 
// - 这个独立的存储变量的文件必须是 _开头，因为_开头的文件不会被直接编译到css文件之中; 

// - 提取之后我们要学会把变量的文件引入到当前页面之中; 

@import "./color";
@import "./mixin";

body{
      background-color: $bg-color;
}

@import "./nav";

@import "./footer";

// 混合 mixin 

// 其实就是把一些常用的代码片段进行封装 !; 

// 使用规范 : 要把封装好的混合放入到独立的文件之中; 

// - 创建混合片段 : 
// @mixin absCenter {
//       position: absolute;
//       left: 0;
//       top: 0;
//       right: 0;
//       bottom: 0;
//       margin: auto;
// }

// @mixin clearBoth {
//       content: "";
//       display: block;
//       overflow: hidden;
//       clear:both;
// }

// - 使用混合片段 : 
// @include absCenter
.box {
      @include absCenter
}

.box::after{
      @include clearBoth();
}

.pox {
      @include absCenter
}

// - 混合其实可以存在参数 : 
// - 可以写默认参数 ; 

// @mixin jianrong( $arg : all 0s ){
//       -webkit-transition: $arg;
//       -moz-transition: $arg;
//       -ms-transition: $arg;
//       -o-transition: $arg;
//       transition: $arg;
// }

.ppox{
      @include jianrong( top 1s );
}

.bbox{
      @include jianrong;
}


// 嵌套结构 

// 要给 .box 下的 p 标签写样式 
// 要给 .box 下的 p 标签里面的span写样式 
// 要给 .box 写样式  

.box{
      width: 100px;
      height: 100px;

      &::after{
            @include clearBoth;
      }

      p{
            line-height: 20px;

            &:hover{
                  color: black;
            }

            @at-root span{

                  color: pink;
                  
                  img{
                        width: 100%;
                        height: 100%;
                  }
            }
      }
}

// 1. 如果想要用到当前选择器怎么办 ; 

// - 在大括号里面 & 表示当前的选择器; 

// 2. 不常用 : 跳出选择器 ; 
// @at-root 食之无味; 

// 继承 : extends 

.pppox{
      @extend .box;

      background-color: $bg-color;
}

